<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>标志地图</title>
    <link rel="stylesheet" href="../css/碎片.css" />
  </head>
  <body>
    <!-- 全屏固定背景视频 -->
    <div class="background-video">
      <video autoplay muted loop playsinline class="bg-video">
        <source src="../videos/首页视频.mp4" type="video/mp4" />
        <img src="../images/首页背景.jpg" alt="背景图备用" />
      </video>
    </div>

    <!-- 中间纯白内容容器 -->
    <div class="content-container">
      <div class="container page-with-map-animation">
        <!-- 标题行：左侧返回按钮 + 中间标题（同一行，带间距） -->
        <div class="title-container">
          <!-- 返回按钮（小正方形图片，左侧留间距） -->
          <div class="back-btn">
            <img src="../images/返回.png" alt="返回上一页" class="back-img" />
          </div>
          <!-- 标题 -->
          <h1 class="page-title">旅行地图</h1>
        </div>

        <div class="content">
          <div class="map-container">
            <img
              src="../images/九层塔.jpg"
              alt="九层塔"
              class="map-btn"
              id="btn-jiucengta"
              style="bottom: 15%; right: 30%"
            />
            <img
              src="../images/九色鹿.png"
              alt="九色鹿"
              class="map-btn"
              id="btn-jiuselu"
              style="bottom: 35%; right: 22%"
            />
            <img
              src="../images/鸣沙山.jpg"
              alt="鸣沙山"
              class="map-btn"
              id="btn-mingshashan"
              style="bottom: 40%; left: 35%"
            />
            <img
              src="../images/月牙泉.jpg"
              alt="月牙泉"
              class="map-btn"
              id="btn-yueyaquan"
              style="top: 35%; left: 20%"
            />
            <img
              src="../images/驼铃.jpg"
              alt="驼铃"
              class="map-btn"
              id="btn-tuoling"
              style="top: 20%; left: 45%"
            />
            <img
              src="../images/书卷.jpg"
              alt="书卷"
              class="map-btn"
              id="btn-shujuan"
              style="top: 20%; right: 18%"
            />
          </div>
        </div>

        <!-- 创建按钮 -->
        <div class="confirm-container">
          <button id="directCreateBtn" class="create-btn">创建</button>
        </div>
      </div>
    </div>

    <script src="../js/标志地图.js"></script>
  </body>
</html>
